<template>
  <header>
    <header-top></header-top>
    <header-nav></header-nav>
    <header-swiper :modelValue="swiperData"></header-swiper>
  </header>
</template>
  
  <script>
import HeaderTop from "./header-top.vue";
import HeaderNav from "./header-nav.vue";
import HeaderSwiper from "./header-swiper.vue";

import ajax from "@/util/request";

export default {
  components: {
    HeaderTop,
    HeaderNav,
    HeaderSwiper,
  },
  data() {
    return {
      swiperData: []
    }
  },
  watch: {
    "$route.params.t_cat_pk": {
      // 立即侦听：如果不打开立即侦听，第一次默认的5的值，不会被侦听到
      immediate: true,
      // 侦听参数变化后执行的逻辑
      handler(newVal) {
        if (newVal == null) {
          newVal = 5;
        }
        // console.log("HeaderSwiper传值变化：", newVal);
        ajax("/banner/queryList", {
          t_cat_fk: newVal,
          rows: 4,
        }).then(({ data }) => {
          if (data.status > 0) {
            this.swiperData = data.result_data;
          }
        });
      },
    },
  },
};
</script>
  
<style scoped>
/deep/.swiper {
  height: 420px;
  width: 1400px;
  margin: auto;
}


</style>